<script setup>
const courseContent = [
  {
    id: 'S1',
    imgUrl: new URL('../../../assets/course/course1.webp', import.meta.url)
      .href,
    content:
      '编写程序来控制有趣的达奇机器人，探索模块化编程的操作技巧；感受软件编程的趣味，构建持续学习动力，为后续课程做好铺垫。'
  },
  {
    id: 'S2',
    imgUrl: new URL('../../../assets/course/course2.webp', import.meta.url)
      .href,
    content:
      '熟悉Scratch软件开发环境，掌握Scratch编程工具包和基础技能；熟悉Scratch作品素材设计，培养想象力、强化创新意识。'
  },
  {
    id: 'S3',
    imgUrl: new URL('../../../assets/course/course3.webp', import.meta.url)
      .href,
    content:
      '掌握软件编程核心技能 : 变量、三种运算符、条件分支及分支嵌套；培养程序流程图的阅读与分析，强化训练逻辑思维能力。'
  },
  {
    id: 'S4',
    imgUrl: new URL('../../../assets/course/course4.webp', import.meta.url)
      .href,
    content:
      '掌握软件编程核心技能 : 掌握软件编程核心技能 : 循环、链表、函数；培养程序流程图的绘制，使学生具备初级软件工程师的思维能力'
  },
  {
    id: 'S5',
    imgUrl: new URL('../../../assets/course/course5.webp', import.meta.url)
      .href,
    content:
      '通过完成家庭亲情互动类程序的设计，熟悉鼠标与键盘的操作；感受软件编程的趣味，构建持续学习动力，为后续课程做好铺垫。'
  },
  {
    id: 'S6',
    imgUrl: new URL('../../../assets/course/course6.webp', import.meta.url)
      .href,
    content:
      '熟悉Scratch软件开发环境，掌握Scratch编程工具包和基础技能；熟悉Scratch作品素材设计，培养想象力、强化创新意识。'
  }
]
</script>
<template>
  <div class="course_system">
    <div class="title">
      <div class="titlt_img"><span>课程体系</span></div>
      <span class="description">覆盖6～17岁青少年编程学习全阶段</span>
    </div>
    <div class="content wrapper">
      <div v-for="item in courseContent" :key="item.id" class="course_item">
        <img :src="item.imgUrl" />
        <div class="step_icon">{{ item.id }}</div>
        <div class="course_content">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.course_system {
  padding: 92px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title {
    width: 397px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: auto ease 0s 1 normal none running none;
    .titlt_img {
      position: relative;
      width: 300px;
      height: 30px;
      background: url('@/assets/course/titlelogo.webp') no-repeat center/contain;
      span {
        position: absolute;
        font-weight: bold;
        font-size: 36px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .description {
      margin-top: 20px;
      font-size: 14px;
      color: rgb(178, 178, 178);
      line-height: 48px;
    }
  }
  .content {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 50px;
    justify-content: center;
    margin-top: 40px;
    .course_item {
      width: 416px;
      height: 460px;
      background-color: #fffdfd;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      animation: auto ease 0s 1 normal none running none;
      display: flex;
      align-items: center;
      flex-direction: column;
      &:hover {
        transform: translateY(-5px);
        transition: all 0.3s ease-in-out 0s;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
      }
      img {
        width: 100%;
        height: auto;
      }
      .step_icon {
        width: 60px;
        height: 60px;
        background-color: #ffb546;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        margin-top: -30px;
      }
      .course_content {
        margin-top: 20px;
        padding: 0 30px;
        font-size: 14px;
        color: rgb(128, 128, 128);
        line-height: 30px;
      }
    }
  }
}
</style>
